<template>
  <div class="address" :style="'height: ' + maxHeight + 'px'">
    <Header title="收货地址"></Header>
    <nut-address-list
      :data="addressInfo.list"
      :show-bottom-button="true"
      :data-options="dataOptions"
      @del-icon="deleteAddress"
      @edit-icon="updateAddress"
      @add="addAddress"
    >
    </nut-address-list>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();

const maxHeight = ref(`${document.documentElement.clientHeight}` - 45);
const dataOptions = reactive({
  addressName: "name",
  defaultAddress: "defaultAddressFlag",
});

// 收货地址列表
const addressInfo = reactive({
  list: [],
});

// 页面加载后执行
onMounted(() => {
  getData();
});

const getData = () => {
  proxy.$memberApi.address.list(proxy.$userUtils.getUserId()).then((res) => {
    addressInfo.list = res.data;
  });
};

// 新增地址
const addAddress = (event, item) => {
  router.push("/address/update");
};

// 编辑地址
const updateAddress = (event, item) => {
  router.push({ path: "/address/update", query: { addressId: item.id } });
};

// 删除地址
const deleteAddress = (event, item) => {
  proxy.$showDialog({
    content: "确认删除该地址？",
    function() {},
    onOk: () => {
      proxy.$memberApi.address.delete(item.id).then((res) => {
        getData();
      });
    },
  });
};
</script>

<style lang="less" scoped>
.address {
  background: #fff;
  padding: 0px 10px;
  :deep(.nut-address-list-item__info-contact-default) {
    padding: 2px 6px;
    line-height: 14px;
  }
}
</style>